//   ===== 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会 ===

// 1. 嵌套规则
.main {
    .content {
        .left {
            width: 10px;
        }
        .right {
            width: calc(100vw - 10px);
        }
    }
}

// 2.父级选择器 &
.main {
    background-color: #fff;
    &:hover {
        background-color: #000;
    }
}

// 3. 变量 $
$font_color: red;
.main {
    color: $font_color;
}

// 4.导入SASS文件;
@import "another.scss";
.main {
    @import "overhide.scss";
}

// 5.混入 @mixin
// 不传参
@mixin overhide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.main{
    color: red;
    @include overhide
}
// 传参
@mixin font_set($color, $size, $weight) {
    color: $color;
    font-size: $size;
    font-weight: $weight;
}
.main{
    text-align: center;
    @include font_set(red, 12px, 600)
}
// 不传参默认值
@mixin font_set($color: red, $size: 12px, $weight: 500) {
    color: $color;
    font-size: $size;
    font-weight: $weight;
}
.main{
    text-align: center;
    @include font_set
}

// 选择器继承 @extend
// .main将会继承样式表中任何位置处为.defaultBorder定义的所有样式。以class="main" 修饰的html元素最终的展示效果就好像是class="main defaultBorder"
.defaultBorder{
    border: 1px solid red;
}
.main{
    @extend .defaultBorder;
}